{%- liquid
  assign show_padding = true
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
      assign show_padding = false
    when 'black'
      assign background_color = 'bg-black'
  endcase
-%}

{%- liquid
  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign btn_style = 'light'
      assign richtext_link_style = 'richtext-link-light'
    else
      assign text_color = ''
      assign btn_style = 'primary'
      assign richtext_link_style = 'richtext-link-default'
  endcase

  case section.settings.text_alignment
    when 'left'
      assign text_alignment = 'text-md-start'
      assign content_alignment = 'mx-md-0'
      assign controls_alignment = 'justify-content-md-start'
    when 'center'
      assign text_alignment = 'text-md-center'
      assign content_alignment = 'mx-md-auto'
      assign controls_alignment = 'justify-content-md-center'
  endcase

  case section.settings.mobile_text_alignment
    when 'left'
      assign desk_desc_alignment = text_alignment | append: ' text-start'
      assign text_alignment = text_alignment | append: ' text-start'
      assign content_alignment = content_alignment | append: ' mx-0'
      assign controls_alignment = controls_alignment | append: ' justify-content-start'
      assign mobile_alignment = 'justify-content-start'
    when 'center'
      assign desk_desc_alignment = text_alignment | append: ' text-start'
      assign text_alignment = text_alignment | append: ' text-center'
      assign content_alignment = content_alignment | append: ' mx-auto'
      assign mobile_alignment = 'justify-content-center'
  endcase

  case section.settings.button_set_style
    when 'solid_with_outline'
      assign first_button_class = 'mx-2 btn-'
      assign second_button_class = 'mx-2 btn-outline-'
      assign parent_class = 'mx-n2'
    when 'solid_with_text_link'
      assign first_button_class = 'mx-3 btn-'
      assign second_button_class = 'mx-3 btn-link link-'
      assign parent_class = 'mx-n3'
    when 'outline'
      assign first_button_class = 'mx-2 btn-outline-'
      assign second_button_class = 'mx-2 btn-outline-'
      assign parent_class = 'mx-n2'

    when 'outline_with_text_link'
      assign first_button_class = 'mx-3 btn-outline-'
      assign second_button_class = 'mx-3 btn-link link-'
      assign parent_class = 'mx-n3'
    when 'text_link'
      assign first_button_class = 'mx-3 btn-link link-'
      assign second_button_class = 'mx-3 btn-link link-'
      assign parent_class = 'mx-n3'
  endcase
-%}
<link rel="stylesheet" href="{{ 'image-tab-index.min.css' | asset_url }}">

<div class="image-tab-container-{{ section.id }} overflow-hidden {% if show_padding %}py-section{% else %}my-section{% endif %} {{ background_color }} {{ text_color }}">
  <input class="as-image-tab-script" type="hidden" value="{{ 'image-tab.min.js' | asset_url }}" {% if request.design_mode %}data-design-mode="yes"{% endif %}>
  {%- liquid 
    if section.settings.overline != empty or section.settings.heading != empty or section.settings.text != empty or section.settings.button_label != empty or section.settings.button_label_2 != empty
      assign show_content_container = true
    else
      assign show_content_container = false
    endif
  -%}
  {%- if show_content_container -%}
  <div class="container mb-6 mb-md-7">
    <div class="row {{ controls_alignment }}">
      <div class="{{ section.settings.text_width }}">
        <div class="mw-text-5 {{ text_alignment }} {{ content_alignment }}">
          {%- if section.settings.overline != empty -%}
            <p class="mb-0">{{ section.settings.overline }}</p>
          {%- endif -%}
          {%- if section.settings.heading != empty -%}
            <h2 class="h1 mb-0">{{ section.settings.heading }}</h2>
          {%- endif -%}
          {%- if section.settings.text != empty -%}
            <div class="mt-2 fs-6 no-last-margin richtext-with-link {{ richtext_link_style }}">
              {{ section.settings.text }}
            </div>
          {%- endif -%}
          {%- if section.settings.button_label != empty or section.settings.button_label_2 != empty -%}
            <div class="mt-5">
              <div class="mt-n2 {{ parent_class }}">
                  {%- if section.settings.button_label != empty -%}
                    {%- if section.settings.button_link != blank -%}
                      <a {% render 'link', link: section.settings.button_link %} href="{{ section.settings.button_link }}" class="btn {{ first_button_class }}{{ btn_style }} mt-2">
                        {{ section.settings.button_label }}
                      </a>
                    {%- else -%}
                      <div class="btn {{ first_button_class }}{{ btn_style }} mt-2 disabled cursor-default">
                        {{ section.settings.button_label }}
                      </div>
                    {%- endif -%}
                  {%- endif -%}
    
                  {%- if section.settings.button_label_2 != empty -%}
                    {%- if section.settings.button_link_2 != blank -%}
                      <a {% render 'link', link: section.settings.button_link_2 %} href="{{ section.settings.button_link_2 }}" class="btn {{ second_button_class }}{{ btn_style }} mt-2">
                        {{ section.settings.button_label_2 }}
                      </a>
                      {%- else -%}
                      <div class="btn {{ second_button_class }}{{ btn_style }} mt-2 disabled cursor-default">
                        {{ section.settings.button_label_2 }}
                      </div>
                    {%- endif -%}
                  {%- endif -%}
              </div>
            </div>
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>
  {%- endif -%}
  
  {%- assign slide_blocks = section.blocks | where: 'type', 'slide' -%}
  {%- if slide_blocks.size > 0 -%}
    <div class="mw-100 position-relative d-flex flex-column not-initialized overflow-hidden as-image-tab-container">
      <div class="swiper main-swiper position-relative w-100 as-swiper">
        <div class="swiper-wrapper main-swiper-wrapper {% if slide_blocks.size == 1 %} justify-content-md-center {{ mobile_alignment }}{% endif %}">
          {%- for block in slide_blocks -%}
            {%- assign sizes = '(min-width: 1440px) 1142px, (min-width: 1280px) 842px, (min-width: 1152px) 742px, (min-width: 768px) 598px, (min-width: 576px) 450px, 312px' -%}
            <div class="as-swiper-slide main-swiper-slide swiper-slide {% if forloop.first %}swiper-slide-active{% endif %}" {{ block.shopify_attributes }}>
              {%- if block.settings.desktop_image != nil -%}
                <div class="d-md-block d-none ratio rounded-2 overflow-hidden" 
                  style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.desktop_image.aspect_ratio | times: 100 }}%;">
                  {{ block.settings.desktop_image | image_url: width: block.settings.desktop_image.width | image_tag: loading: 'lazy', class: 'object-fit-cover', sizes: sizes }}
                </div>
              {%- else -%}
                <div class="d-md-block d-none ratio ratio-2x1 rounded-2 bg-gray-400 overflow-hidden">
                  {% assign num = forloop.index | modulo: 5 | plus: 1 %}
                  {% assign placeholder = 'collection-' | append: num %}
                  {{ placeholder | placeholder_svg_tag: 'absolute-center placeholder-svg w-100 h-100' }}
                </div>
              {%- endif -%}

              {%- if block.settings.mobile_image != nil -%}
                <div class="d-md-none d-block ratio rounded-2 overflow-hidden" 
                  style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.mobile_image.aspect_ratio | times: 100 }}%;">
                  {{ block.settings.mobile_image | image_url: width: block.settings.mobile_image.width | image_tag: loading: 'lazy', class: 'object-fit-cover w-100 h-100', sizes: sizes }}
                </div>
              {%- else -%}
                <div class="d-md-none d-block ratio ratio-3x2 rounded-2 bg-gray-400 overflow-hidden">
                  {% assign num = forloop.index | modulo: 5 | plus: 1 %}
                  {% assign placeholder = 'collection-' | append: num %}
                  {{ placeholder | placeholder_svg_tag: 'absolute-center placeholder-svg w-100 h-100' }}
                </div>
              {%- endif -%}
            </div>
          {%- endfor -%}
        </div>

        {%- comment -%}左右箭头{%- endcomment -%}
        <div class="d-lg-block d-none position-absolute top-50 translate-middle-y w-100" style="z-index: 1;">
          <div class="container">
            <div class="row justify-content-center">
              <div class="col-lg-10 col-12 position-relative d-flex justify-content-between">
                {%- if slide_blocks.size > 1 -%}
                  {% liquid 
                    assign indicator_color = 'text-body'
                    assign indicator_inverse_color = 'text-body-inverse'
                  %}
                  <div class="as-swiper-indicator-prev swiper-indicator-prev d-flex align-items-center justify-content-center ms-4 {{ indicator_color }}"><span class="icon-wrap-xl {{ indicator_inverse_color }}">{% render 'icon-chevron-left-tab' %}</span></div>
                  <div class="as-swiper-indicator-next swiper-indicator-next d-flex align-items-center justify-content-center me-4 {{ indicator_color }}"><span class="icon-wrap-xl {{ indicator_inverse_color }}">{% render 'icon-chevron-right-tab' %}</span></div>
                {%- endif -%}
              </div>
            </div>
          </div>
        </div>
      </div>

      {%- comment -%}指示器{%- endcomment -%}
      <div class="swiper-indicators-container container order-md-0 order-1 mt-4 mt-md-5">
        <div class="row justify-content-center">
          <div class="as-indicators-box indicators-box col-md-10 col-12">
            <input class="as-mw-field mw-field" type="hidden" value="">
            <div class="as-swiper-indicators swiper swiper-indicators d-flex text-nowrap flex-md-row flex-column flex-nowrap {{ controls_alignment }}"> 
              <div class="swiper-wrapper d-flex text-nowrap flex-md-row flex-column flex-nowrap {{ controls_alignment }}">
                {%- for block in slide_blocks -%}
                  {% liquid
                    if forloop.last
                      assign indiTextSize = 'multi-last'
                    elsif slide_blocks.size == 1 and forloop.index == 1
                      assign indiTextSize = 'only-one'
                    elsif slide_blocks.size == 2 and forloop.index == 2
                      assign indiTextSize = 'only-two-second'
                    endif
                  %}
                  {%- if block.settings.heading != empty -%}
                  <div class="as-swiper-indicator swiper-slide swiper-indicator fs-6 {% if forloop.first %}swiper-indicator-active{% endif %}" data-index="{{ forloop.index0 }}">
                      <h3 class="as-indicator-text {{ indiTextSize }}  {% if forloop.first %}first{% endif %} mb-0 ms-md-0 ms-2 fs-5 fw-bold {% if section.settings.text_color == 'white' %}light{% else %}dark{% endif %}">{{ block.settings.heading }}</h3>
                    </div>
                  {%- endif -%}
                {%- endfor -%}
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="container mt-2 mt-md-4">
        <div class="row {{ controls_alignment }}">
          <div class="{{ section.settings.text_width }} {{ content_alignment }}">
            <div class="as-swiper-desc-container swiper-desc-container not-initialized position-relative">
              {%- for block in slide_blocks -%}
                <div class="as-swiper-desc-item fs-6 swiper-desc-item {% if forloop.first %}active{% endif %}">
                  {%- if block.settings.text != blank -%}
                    <div class="no-last-margin richtext-with-link {{ desk_desc_alignment }} {{ richtext_link_style }}">
                      {{ block.settings.text }}
                    </div>
                  {%- endif -%}
                </div>
              {%- endfor -%}
            </div>
          </div>
        </div>
      </div>
    </div>
  {%- endif -%}
</div>

{% javascript %}
  (function() {
    var $url = document.querySelector('.as-image-tab-script')
    if (!window.imageTab && $url && $url.dataset.designMode !== 'yes') {
      window.imageTab = $url.value

      var $script = document.createElement('script')
      $script.src = window.imageTab
      $script.defer = "defer"
      document.body.appendChild($script)
    }
  })()
{% endjavascript %}

{% schema %}
  {
    "name": "Image tab",
    "class": "image-tab as-image-tab",
    "tag": "section",
    "max_blocks": 7,
    "settings": [
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "white"
      },
      {
        "type": "text",
        "id": "heading",
        "default": "Image with text",
        "label": "Heading"
      },
      {
        "type": "richtext",
        "id": "text",
        "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
        "label": "Description"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "white",
             "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }  
        ],
        "default": "black"
      },
      {
        "type": "select",
        "id": "text_width",
        "label": "Desktop text width",
        "options": [
          {
            "value": "col-md-8 col-12",
            "label": "2/3"
          },
          {
            "value": "col-md-6 col-12",
            "label": "1/2"
          },
          {
            "value": "col-md-4 col-12",
            "label": "1/3"
          }
        ],
        "default": "col-md-8 col-12"
      },
      {
        "type": "select",
        "id": "text_alignment",
        "label": "Desktop text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "center"
      },
      {
        "type": "select",
        "id": "mobile_text_alignment",
        "label": "Mobile text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "center"
      },
      {
        "type": "text",
        "id": "button_label",
        "default": "Button label",
        "label": "Primary button label"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Primary button link"
      },
      {
        "type": "text",
        "id": "button_label_2",
        "default": "Button label",
        "label": "Secondary button label"
      },
      {
        "type": "url",
        "id": "button_link_2",
        "label": "Secondary button link"
      },
      {
        "type": "select",
        "id": "button_set_style",
        "label": "Button set style",
        "options": [
          {
            "value": "solid_with_outline",
            "label": "Solid button with Outlined button"
          },
          {
            "value": "solid_with_text_link",
            "label": "Solid button with Text link"
          },
          {
            "value": "outline",
            "label": "Outlined button"
          },
          {
            "value": "outline_with_text_link",
            "label": "Outlined button with Text link"
          }, {
            "value": "text_link",
            "label": "Text link"
          }
        ],
        "default": "solid_with_outline"
      }
    ],
    "blocks":[
      {
        "type": "slide",
        "name": "Slide",
        "settings": [
          {
            "label": "Desktop image",
            "type": "image_picker",
            "id": "desktop_image"
          },
          {
            "label": "Mobile image",
            "type": "image_picker",
            "id": "mobile_image"
          },
          {
            "type": "text",
            "id": "heading",
            "default": "Heading",
            "label": "Heading"
          },
          {
            "type": "richtext",
            "id": "text",
            "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post.</p>",
            "label": "Description"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Image tab",
        "blocks": [
          {
            "type": "slide"
          },
          {
            "type": "slide"
          },
          {
            "type": "slide"
          }
        ]
      }
    ]
  }
{% endschema %}
